<template>
  <div class="user_page">
    <div class="bar">
      <div style="height: 3rem"></div>
      <van-nav-bar :fixed="true" title="用户" left-text="返回" left-arrow @click-left="returnPage" @click-right="editArticleInfo">
        <template #right>
          <van-icon name="add-o" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 个人信息区域 -->
    <div class="top">
      <div class="userImg">
        <div class="msg">
          <img :src="userInfo.photo" alt="图片" class="image" />
        </div>
      </div>
      <hr class="line" />
      <van-row>
        <van-col span="8">
          <div class="count">{{ userInfo.artCount }}</div>
          <div class="txt">动态</div>
        </van-col>
        <van-col span="8">
          <div class="count">{{ userInfo.followCount }}</div>
          <div class="txt">关注</div>
        </van-col>
        <van-col span="8">
          <div class="count">{{ userInfo.fansCount }}</div>
          <div class="txt">粉丝</div>
        </van-col>
      </van-row>
    </div>
    <div class="user_grid">
      <!-- 收藏区域 -->
      <van-grid :column-num="3" :border="false">
        <van-grid-item icon="star-o" text="收藏" />
        <van-grid-item icon="clock-o" text="历史" />
        <van-grid-item icon="orders-o" text="作品" />
      </van-grid>
    </div>
    <div class="user_group">
      <!-- 信息区域 -->
      <van-cell-group inset>
        <van-cell title="消息通知" is-link />
        <van-cell title="用户反馈" is-link />
        <van-cell title="小智同学" is-link />
        <van-cell title="退出登入" is-link @click="logout" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import requestApi from '@/utils/request.js'
export default {
  name: 'UserComponent',
  data() {
    return {
      userInfo: {
        photo: 'http://127.0.0.1:9000/static/image/Default_avatar.jpg',
        userName: 'John Doe',
        artCount: 10,
        followCount: 50,
        fansCount: 0
      }
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    returnPage() {
      this.$router.back()
    },
    // 新增文章
    editArticleInfo() {
      this.$router.push('/edit')
    },
    logout() {
      const token = localStorage.getItem('my_token')
      const then = this
      requestApi({
        method: 'post',
        url: 'logout',
        headers: {
          // 设置请求头
          Authorization: token
        }
      })
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            localStorage.removeItem('my_token')
            then.$router.push('/login')
            Toast.success('登出成功')
          } else {
            Toast.fail(req.msg)
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('登出错误')
        })
    },
    getUserInfo() {
      const token = localStorage.getItem('my_token')
      const then = this
      requestApi({
        method: 'get',
        url: 'getUserInfo',
        headers: {
          // 设置请求头
          Authorization: token
        }
      })
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            then.userInfo = req.data.userInfo
          } else {
            Toast.fail(req.msg)
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('用户信息获取错误')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.count {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}

.txt {
  font-size: 14px;
  color: #999;
  text-align: center;
}

.userImg {
  width: 100%;
  height: 300px;
  background-image: url('assets/img/userBG.jpg');
  .msg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    .image {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
    }
  }
}

.line {
  position: relative;
  border: none;
  background-color: #9dc2e0;
  height: 5px;
}
</style>
